import React from 'react';
import { Card, Col, Row } from 'antd';
import CountUp from 'react-countup';
import styles from './index.less';

const countUpProps = {
  star: 0,
  duration: 2.75,
  useEasing: true,
  useGrouping: true,
  separator: ','
}

const Info = ({ title, value, bordered }) => {
  const ref = React.createRef();
  return (
    <div className={styles.rightHeader}>
      <span>{title}</span>
      <p> <CountUp ref={ref} end={value} {...countUpProps} /></p>
      {bordered && <em />}
    </div>
  )
};

class Tables extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      numUnits,
      numRent,
      numAttend,
      numItems,
      numStudent
    } = this.props.statistics
    return (
      <Card style={{ marginBottom: 16 }} bordered={false}>
        <Row>
          <Col sm={5} xs={12}>
            <Info title="下级机构数量" value={numUnits} bordered />
          </Col>
          <Col sm={5} xs={12}>
            <Info title="今日借阅次数" value={numRent} bordered />
          </Col>
          <Col sm={5} xs={24}>
            <Info title="今日到馆人数" value={numAttend} bordered />
          </Col>
          <Col sm={5} xs={12}>
            <Info title="馆藏数" value={numItems} bordered />
          </Col>
          <Col sm={4} xs={12}>
            <Info title="学生数" value={numStudent} />
          </Col>
        </Row>
      </Card>
    );
  }
}

export default Tables;
